<template>
  <el-container>
    <PublicHeader style="box-shadow: 0 1px 10px 0 #dfdfdf;">
      <template slot="left" style="text-align: left;">
        <div style="margin-right: 15px; display: inline-block; padding: 10px; cursor:pointer;" @click="drawer = true">
          <i class="el-icon-s-operation"></i>
        </div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
          <el-breadcrumb-item :to="{ path: '/courseList' }">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item>用户设置</el-breadcrumb-item>
        </el-breadcrumb>

        <el-drawer
          :visible.sync="drawer"
          :direction="'ltr'"
          size="315px">
          <template slot="title">
            <div style="width: 96px">
              <img src="/static/logo/logo_blue.png" alt="logo" height="24px">
            </div>
          </template>
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item style="width: 100%" v-for="(item, index) in menus" :key="index" @click="toNav(item.route)">
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-drawer>
      </template>
      <template slot="right">
        <HeaderRight></HeaderRight>
      </template>
    </PublicHeader>
    <main>
      <div class="view-user-setting">
        <div class="head-box">
          <div class="avatar-box">
            <el-avatar
              style="height: 88px;width: 88px;line-height: 88px;"
              :src="'../../static/user/userImg.jpg'">
            </el-avatar>
          </div>
          <div class="user-info">
            <h6 class="name">{{ userInfo.name }}</h6>
            <div>
              <el-button type="text">开通课堂派VIP</el-button>
            </div>
          </div>
        </div>
        <div class="tabs-box">
          <el-tabs v-model="activeName" style="width: 100%">
            <el-tab-pane label="账户信息" name="first">
              <div class="tabs-account">
                <div>
                  <h3 class="flex-between">
                    <span>基础信息</span>
                    <span class="but-box" v-if="!editBaseInfoVisible" @click="editBaseInfoVisible = true">编辑</span>
                    <span v-else>
                      <el-button size="mini" @click="cancelEditBaseInfo">取消</el-button>
                      <el-button size="mini" type="primary" @click="submitEditBaseInfo">保存</el-button>
                    </span>
                  </h3>
                  <ul class="form-card">
                    <li class="list">
                      <label class="label-title">姓名</label>
                      <p class="info-txt" v-if="!editBaseInfoVisible">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="baseInfo.name === null"></i>
                          {{ baseInfo.name }}
                        </span>
                      </p>
                      <p class="input-p" v-else>
                        <el-input
                          v-model="baseInfo.name"
                          placeholder="请输入内容"
                          maxlength="8"
                          show-word-limit></el-input>
                      </p>
                    </li>
                    <li class="list">
                      <label class="label-title">工号</label>
                      <p class="info-txt" v-if="!editBaseInfoVisible">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="baseInfo.jobNumber === null"></i>
                          {{ baseInfo.jobNumber === null ? '未完善' : baseInfo.jobNumber }}
                        </span>
                      </p>
                      <p class="input-p" v-else>
                        <el-input
                          v-model="baseInfo.jobNumber"
                          placeholder="请输入内容"
                          maxlength="20"
                          show-word-limit></el-input>
                      </p>
                    </li>
                    <li class="list">
                      <label class="label-title">学校</label>
                      <p class="info-txt" v-if="!editBaseInfoVisible">
                        <span class="info">
                        <i class="el-icon-warning font-color--warning" v-if="baseInfo.school === null"></i>
                        {{ baseInfo.school }}
                        </span>
                      </p>
                      <p class="input-p" v-else>
                        <el-input
                          v-model="baseInfo.school"
                          placeholder="请输入内容"></el-input>
                      </p>
                    </li>
                    <li class="list">
                      <label class="label-title">院系</label>
                      <p class="info-txt" v-if="!editBaseInfoVisible">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="baseInfo.academy === null"></i>
                          {{ baseInfo.academy === null ? '未完善' : baseInfo.academy }}
                        </span>
                      </p>
                      <p class="input-p" v-else>
                        <el-input
                          v-model="baseInfo.academy"
                          placeholder="请输入内容"></el-input>
                      </p>
                    </li>
                    <li class="list">
                      <label class="label-title">专业</label>
                      <p class="info-txt" v-if="!editBaseInfoVisible">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="baseInfo.major === null"></i>
                          {{ baseInfo.major === null ? '未完善' : baseInfo.major }}
                        </span>
                      </p>
                      <p class="input-p" v-else>
                        <el-input
                          v-model="baseInfo.major"
                          placeholder="请输入内容"></el-input>
                      </p>
                    </li>
                    <li class="list">
                      <label class="label-title">所授课程</label>
                      <p class="info-txt" v-if="!editBaseInfoVisible">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="baseInfo.teachCourse === null"></i>
                          未完善
                        </span>
                      </p>
                      <p class="input-p" v-else>
                        <el-input
                          v-model="baseInfo.teachCourse"
                          placeholder="请输入内容"></el-input>
                      </p>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3 class="flex-between">
                    <span>账号设置</span>
                    <!--                    <span class="but-box">编辑</span>-->
                  </h3>
                  <ul class="form-card">
                    <li class="list">
                      <label class="label-title">账号</label>
                      <p class="info-txt">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="userInfo.account === null"></i>
                          {{ userInfo.account }}
                        </span>
                      </p>
                    </li>
                    <li class="list">
                      <label class="label-title">所属角色</label>
                      <p class="info-txt flex-between" v-if="!changeUsertypeVisible">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="userInfo.usertype === null"></i>
                          {{ userInfo.usertype === 0 ? '老师' : '学生' }}
                        </span>
                        <span class="but-box" v-model="changeUsertypeVisible"
                              @click="changeUsertypeVisible = true">去设置</span>
                      </p>
                      <p class="info-txt flex-between" v-else>
                        <span>
                          <el-radio v-model="baseInfo.usertype" :label="0">老师</el-radio>
                          <el-radio v-model="baseInfo.usertype" :label="1">学生</el-radio>
                        </span>
                        <span>
                          <el-button size="mini" @click="cancelChangeUsertype">取消</el-button>
                          <el-button size="mini" type="primary" @click="submitChangeUsertype">确定</el-button>
                        </span>
                      </p>
                    </li>
                    <li class="list">
                      <label class="label-title">手机号</label>
                      <p class="info-txt flex-between" v-if="!changeMobileVisible">
                        <span class="info" style="margin-right: auto">
                        <i class="el-icon-warning font-color--warning" v-if="userInfo.mobile === null"></i>
                        {{ userInfo.mobile }}
                        </span>
                        <span class="but-box" @click="openEditMobile">更换手机号</span>
                        <span style="margin: 0 6px;color: #dadce0;">|</span>
                        <span class="but-box">解绑</span>
                      </p>
                    </li>
                    <li class="list">
                      <label class="label-title">密码</label>
                      <p class="info-txt flex-between">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="userInfo.password === null"></i>
                          ******
                        </span>
                        <span class="but-box" @click="editPasswordVisible = true">修改密码</span>
                      </p>
                      <el-dialog title="修改密码" :visible.sync="editPasswordVisible" center width="604px">
                        <el-form :model="passwordForm" :rules="rules" ref="passwordForm" label-width="100px">
                          <el-form-item label="新密码" prop="pass">
                            <el-input type="password" v-model="passwordForm.pass" autocomplete="off"
                                      placeholder="请输入新密码" show-passwordForm></el-input>
                          </el-form-item>
                          <el-form-item label="确认新密码" prop="checkPass">
                            <el-input type="password" v-model="passwordForm.checkPass" autocomplete="off"
                                      placeholder="请确认新密码" show-passwordForm></el-input>
                          </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                          <el-button @click="resetEditPaaForm('passwordForm')">取 消</el-button>
                          <el-button type="primary" @click="submitEditPass('passwordForm')">确 定</el-button>
                        </div>
                      </el-dialog>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3 class="flex-between">
                    <span>第三方账号绑定</span>
                    <!--                    <span class="but-box">编辑</span>-->
                  </h3>
                  <ul class="form-card">
                    <li class="list">
                      <label class="label-title">邮箱绑定</label>
                      <p class="info-txt flex-between">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="userInfo.email === null"></i>
                          {{ userInfo.email === null ? '未完善' : userInfo.email }}
                        </span>
                        <span class="but-box">立即绑定</span>
                      </p>
                    </li>
                    <li class="list">
                      <label class="label-title">微信绑定</label>
                      <p class="info-txt flex-between">
                        <span class="info">
                          <i class="el-icon-warning font-color--warning" v-if="userInfo.wechat === null"></i>
                          {{ userInfo.wechat === null ? '未完善' : userInfo.wechat }}
                        </span>
                        <span class="but-box">立即绑定</span>
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="通知设置" name="second">通知设置</el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import PublicHeader from "../../components/PublicHeader";
import HeaderRight from "../../components/HeaderRight";
import {mymessage} from "../../tools/mymessage";
import crypto from "crypto";

export default {
  name: "UserSetting",
  components: {HeaderRight, PublicHeader},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passwordForm.checkPass !== '') {
          this.$refs.passwordForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      drawer: false,
      menus: [
        {
          name: '我的课堂',
          route: '/courseList'
        },
        {
          name: '备课区',
          route: '/lessonPreparation'
        },
        {
          name: '论文管理',
          route: '/thesisDefense'
        }
      ],
      activeName: 'first',
      userInfo: {
        academy: null,
        account: "",
        clazz: null,
        email: null,
        enterTime: null,
        grade: null,
        id: -1,
        jobNumber: null,
        major: null,
        mobile: "",
        name: "",
        password: "",
        school: "",
        teachCourse: null,
        usertype: -1,
        wechat: null
      },
      baseInfo: {
        id: 1,
        account: "",
        jobNumber: "",
        name: "",
        school: "",
        academy: "",
        major: "",
        clazz: "",
        usertype: -1,
        mobile: -1
      },
      settingInfo: {
        usertype: -1,
        mobile: -1,
        password: ''
      },
      updateBindingAccount: {
        email: '',
        wechat: ''
      },
      passwordForm: {
        pass: '',
        checkPass: ''
      },
      editBaseInfoVisible: false,
      changeUsertypeVisible: false,
      changeMobileVisible: false,
      editPasswordVisible: false,
      rules: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // closeDrawer() {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done();
    //     })
    //     .catch(_ => {
    //     });
    // }
    initBaseInfo() {
      this.userInfo = this.$store.getters.userInfo
      console.log("this.userInfo", this.userInfo);
      var {account, email, wechat, enterTime, grade, mobile, password, ...rest1} = this.userInfo;
      this.baseInfo = rest1;
      var {
        email,
        wechat,
        enterTime,
        grade,
        academy,
        clazz,
        jobNumber,
        major,
        name,
        school,
        teachCourse,
        ...rest2
      } = this.userInfo;
      this.settingInfo = rest2;
      console.log("this.settingInfo", this.settingInfo);
      var {email, wechat} = this.userInfo;
      this.updateBindingAccount = {email, wechat};
      console.log("this.updateBindingAccount", this.updateBindingAccount);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toNav(nav) {
      this.$router.push(nav)
    },
    cancelEditBaseInfo() {
      this.editBaseInfoVisible = false
      var {account, email, wechat, enterTime, grade, mobile, password, usertype, ...rest} = this.userInfo;
      this.baseInfo = rest;
    },
    submitEditBaseInfo() {
      this.$store.dispatch('submitEditBaseInfo', this.baseInfo).then(resp => {
        if (resp.code === 200) {
          this.editBaseInfoVisible = false
          this.initBaseInfo()
        }
      })
    },
    cancelChangeUsertype() {
      this.changeUsertypeVisible = false
      var {
        email,
        wechat,
        enterTime,
        grade,
        academy,
        clazz,
        jobNumber,
        major,
        name,
        school,
        teachCourse,
        ...rest2
      } = this.userInfo;
      this.settingInfo = rest2;
    },
    submitChangeUsertype() {
      this.$store.dispatch('submitSettingInfo', this.baseInfo).then(resp => {
        if (resp.code === 200) {
          this.changeUsertypeVisible = false
          this.initBaseInfo()
        }
      })
    },
    openEditMobile() {
      this.changeMobileVisible = true
      this.$prompt('', '修改手机号', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        this.settingInfo.mobile = value
        this.submitEditMobile()
        this.changeMobileVisible = false
      }).catch(() => {
        mymessage.info("取消修改")
        this.changeMobileVisible = false
      });
    },
    submitEditMobile() {
      this.$store.dispatch('submitSettingInfo', this.settingInfo).then(resp => {
        if (resp.code === 200) {
          this.changeUsertypeVisible = false
          this.initBaseInfo()
        }
      })
    },
    submitEditPass(passwordForm) {
      this.$refs[passwordForm].validate((valid) => {
        if (valid) {
          // md5 加密
          let md5 = crypto.createHash("md5");
          md5.update(this.passwordForm.pass);
          let password = md5.digest('hex');

          this.settingInfo.password = password
          this.$store.dispatch('submitSettingInfo', this.settingInfo).then(resp => {
            if (resp.code === 200) {
              this.editPasswordVisible = false
              this.initBaseInfo()
              this.resetEditPaaForm(passwordForm)
              mymessage.info('请重新登录')
              this.$store.commit('ACCOUNT_LOGOUT_FAILURE')
              this.$router.push('/')
            }
          })
        } else {
          return false;
        }
      });
    },
    resetEditPaaForm(formName) {
      this.editPasswordVisible = false
      this.$refs[formName].resetFields();
    }
  },
  created() {
    this.initBaseInfo()
  }
}
</script>

<style scoped>
.view-user-setting {
  font-size: 14px;
  width: 900px;
  margin: 14px auto 0;
}

.view-user-setting .head-box {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
}

.view-user-setting .head-box {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.view-user-setting .head-box .user-info {
  padding-left: 16px;
}

.view-user-setting .head-box .user-info h6 {
  margin-bottom: 4px;
  font-size: 20px;
}

.view-user-setting .user-info .name {
  display: flex;
  align-items: center;
}

.view-user-setting .tabs-box {
  margin-top: 16px;
}

.view-user-setting .tabs-account {
  margin-top: 16px;
  background: #f8f9fa;
  border-radius: 0 8px 8px 0;
  padding: 0 24px 24px;
}

.view-user-setting .tabs-account h3 {
  font-size: 16px;
  align-items: center;
  padding: 24px 0;
  overflow: hidden;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
}

.view-user-setting .but-box {
  font-size: 14px;
  cursor: pointer;
  color: #4285f4;
}

.view-user-setting .tabs-account .form-card {
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  box-shadow: inset 4px 0 0 0 #4285f4;
}

.view-user-setting .tabs-account .form-card li {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #dadce0;
  margin-left: 4px;
}

.view-user-setting .tabs-account .form-card li:first-child {
  border: 0;
}

.view-user-setting .tabs-account .form-card li .label-title {
  padding: 0 24px;
  width: 130px;
  text-align: left;
}

.view-user-setting .tabs-account .form-card li .info-txt {
  flex: 1;
  color: #5f6368;
  padding-right: 24px;
  text-align: left;
}

.view-user-setting .tabs-account .form-card li .info-txt .info i {
  margin-right: 8px;
  font-size: 16px;
}

.font-color--warning {
  color: #ff941f;
}

.view-user-setting .tabs-account .form-card li .info-txt .info {
  color: #74787c;
}

.view-user-setting .tabs-account .form-card li .input-p {
  min-width: 200px;
}
</style>
